.pan-index-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  .pic {
    width: 600px;
    height: 600px;
    margin-bottom: 48px;
  }
  .welcome-content {
    font-size: 30px;
    display: block;
    outline: 0;
    padding: 5px;
    border-radius: 3px;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -webkit-text-stroke: 1px #5F84B0;
    font-weight: 700;
    position: absolute;
    left: 50%;
    bottom: -20px;
    transform: translateX(-50%);
    color: transparent;
  }

  .welcome-content-wave {
    font-size: 30px;
    display: block;
    outline: 0;
    padding: 5px;
    border-radius: 3px;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -webkit-text-stroke: 1px #5F84B0;
    font-weight: 700;
    position: absolute;
    left: 50%;
    bottom: -20px;
    color: #5F84B0;
    -webkit-animation: wave 3s ease-in-out infinite;
    animation: wave 3s ease-in-out infinite;
    transform: translateX(-50%);
  }
}

@keyframes wave {
  0%,
  100% {
    -webkit-clip-path: polygon(
      0 80%,
      0 36%,
      17% 38%,
      36% 45%,
      50% 52%,
      58% 57%,
      71% 63%,
      86% 64%,
      100% 58%,
      100% 72%,
      100% 100%,
      0 100%
    );
    clip-path: polygon(
      0 80%,
      0 36%,
      17% 38%,
      36% 45%,
      50% 52%,
      58% 57%,
      71% 63%,
      86% 64%,
      100% 58%,
      100% 72%,
      100% 100%,
      0 100%
    );
  }

  50% {
    -webkit-clip-path: polygon(
      0 85%,
      0 56%,
      16% 60%,
      31% 62%,
      47% 58%,
      59% 50%,
      68% 44%,
      82% 38%,
      100% 34%,
      100% 73%,
      100% 100%,
      0 100%
    );
    clip-path: polygon(
      0 85%,
      0 56%,
      16% 60%,
      31% 62%,
      47% 58%,
      59% 50%,
      68% 44%,
      82% 38%,
      100% 34%,
      100% 73%,
      100% 100%,
      0 100%
    );
  }
}
